$item-path-max-width: 160px;
$item-milestone-max-width: 120px;
$item-weight-max-width: 48px;
$item-remove-button-space: 42px;

.related-items-list {
  padding: $gl-padding-4;
  padding-right: $gl-padding-6;
  border-bottom-left-radius: $gl-border-size-3;
  border-bottom-right-radius: $gl-border-size-3;

  &,
  .list-item:last-child {
    margin-bottom: 0;
  }
}

.related-items-tree {
  .card-header {
    .gl-label {
      line-height: $gl-line-height;
    }
  }

  .sortable-link {
    white-space: normal;
  }

  .item-assignees .avatar {
    height: $gl-padding;
    width: $gl-padding;
  }
}

.item-body {
  position: relative;
  line-height: $gl-line-height;
  border: 1px solid transparent;
  border-radius: $gl-border-radius-base;

  &:hover,
  &:focus-within {
    background-color: $white;
    border-color: $gray-50;
  }

  .merge-request-status.closed {
    color: $red-500;
  }

  .issue-token-state-icon-open,
  .issue-token-state-icon-closed,
  .confidential-icon,
  .item-milestone .icon,
  .item-weight .board-card-info-icon {
    min-width: $gl-padding;
    cursor: help;

    &:focus {
      @include gl-focus;
    }
  }

  .confidential-icon {
    color: $orange-500;
  }

  .item-title {
    flex-basis: 100%;
    font-size: $gl-font-size-small;

    .sortable-link {
      color: $gray-900;
      font-weight: 500;
    }
  }

  .item-path-id .path-id-text,
  .item-milestone .milestone-title,
  .item-due-date,
  .item-weight .board-card-info-text {
    color: $gl-text-color-secondary;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

.item-meta {
  flex-basis: 100%;
  font-size: $gl-font-size;
  color: $gl-text-color-secondary;

  .item-due-date,
  .board-card-weight {
    &.board-card-info {
      margin-right: 0;
    }
  }

  .item-milestone,
  .item-weight {
    cursor: help;
  }

  .item-milestone {
    text-decoration: none;
    max-width: $item-milestone-max-width;
  }

  .item-weight {
    max-width: $item-weight-max-width;
  }
}

.item-assignees {
  .user-avatar-link {
    margin-right: -$gl-padding-4;

    &:nth-of-type(1) {
      z-index: 2;
    }

    &:nth-of-type(2) {
      z-index: 1;
    }

    &:last-child {
      margin-right: 0;
    }
  }

  .avatar {
    height: $gl-padding;
    width: $gl-padding;
    margin-right: 0;
    vertical-align: bottom;
  }

  .avatar-counter {
    height: $gl-padding;
    border: 1px solid transparent;
    background-color: $gl-text-color-tertiary;
    font-weight: $gl-font-weight-bold;
    padding: 0 $gl-padding-4;
    line-height: $gl-padding;
  }
}

.item-path-id {
  font-size: $gl-font-size-small;
  white-space: nowrap;

  .path-id-text {
    font-weight: $gl-font-weight-bold;
    max-width: $item-path-max-width;
  }
}

.mr-ci-status {
  line-height: 0;

  a:focus {
    @include gl-rounded-full;
    @include gl-focus;
  }
}

@include media-breakpoint-down(xs) {
  .btn-sm.dropdown-toggle-split {
    max-width: 40px;
  }
}

@include media-breakpoint-up(sm) {
  .sortable-link {
    max-width: 90%;
  }

}

/* Small devices (landscape phones, 768px and up) */
@include media-breakpoint-up(md) {
  .related-items-tree .item-contents,
  .item-body .item-title {
    max-width: 100%;
  }

  .sortable-link {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
  }

  .item-body {
    .item-contents {
      min-width: 0;
    }
  }

}

/* Medium devices (desktops, 992px and up) */
@include media-breakpoint-up(lg) {
  .item-body {
    .item-title {
      font-size: $gl-font-size;
    }

    .item-meta .item-path-id {
      font-size: inherit; // Base size given to `item-meta` is `$gl-font-size-small`
    }
  }
}

/* Large devices (large desktops, 1200px and up) */
@include media-breakpoint-up(xl) {
  .item-body {
    .item-title {
      width: auto;
      flex-basis: auto;
      flex-shrink: 1;
      font-weight: $gl-font-weight-normal;
    }
  }

  .item-contents {
    overflow: hidden;
  }

  .item-assignees {
    .avatar {
      height: $gl-padding-24;
      width: $gl-padding-24;
    }

    .avatar-counter {
      height: $gl-padding-24;
      min-width: $gl-padding-24;
      line-height: $gl-padding-24;
      border-radius: $gl-padding-24;
    }
  }

  .sortable-link {
    line-height: 1.3;
  }
}
